<template>
      <div class="ddb-table-header" data-role="table-header">
        <div class="el-table__header-wrapper is-scrolling-left"
          ref="headerWrapper">
          <el-table-header
            ref="tableHeader"
            :store="store"
            :border="border"
            :style="{
              width: layout.bodyWidth ? layout.bodyWidth + 'px' : ''
            }">
          </el-table-header>
        </div>
        <div class="ddb-table-fixed-header-wrapper">
          <div class="el-table__fixed"
            v-if="fixedColumns.length > 0"
            ref="fixedWrapper"
            :style="[{
              width: layout.fixedWidth ? layout.fixedWidth + 'px' : ''
            }]">
            <div class="el-table__fixed-header-wrapper"
              ref="fixedHeaderWrapper" >
              <el-table-header
                ref="fixedTableHeader"
                fixed="left"
                :border="border"
                :store="store"
                :style="{
                  width: bodyWidth
                }"></el-table-header>
            </div>
          </div>
          <div class="el-table__fixed-right"
            v-if="rightFixedColumns.length > 0"
            ref="rightFixedWrapper"
            :style="[{
              width: layout.rightFixedWidth ? layout.rightFixedWidth + 'px' : '',
              right: layout.scrollY ? (border ? layout.gutterWidth : (layout.gutterWidth || 0)) + 'px' : ''
            }]">
            <div class="el-table__fixed-header-wrapper fix-right"
              ref="rightFixedHeaderWrapper">
              <el-table-header
                ref="rightFixedTableHeader"
                fixed="right"
                :border="border"
                :store="store"
                :style="{
                  width: bodyWidth
                }"></el-table-header>
            </div>
          </div>
        </div>      
      </div>
</template>

<script>
import { mapStates } from 'element-ui/packages/table/src/store/helper'
export default {
  name: 'ddb-table-header',
  props: {
    store: {
      type: Object,
      required: true
    },
    layout: {
      type: Object,
      required: true
    },
    bodyWidth: {
      type: String,
      default: '900px'
    },
    border: Boolean
  },
  computed: {
    ...mapStates({
      selection: 'selection',
      columns: 'columns',
      tableData: 'data',
      fixedColumns: 'fixedColumns',
      rightFixedColumns: 'rightFixedColumns'
    })
  }

}
</script>
